<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人员详情</title>
    <link href="js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link href="css/table.css" rel="stylesheet" type="text/css">
    <link href="css/addStyle.css" rel="stylesheet" type="text/css">
    <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <style>
        .notice_main1{border: none !important;}
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            background-color: #f5f5f5;
            min-width: 1100px;
            overflow: auto;
        }

        #box {
            width: 100%;
            height: 100%;
            margin: 0 auto 0;
        }

        #tabs ul {
            height: 31px;
            border-left: #ccc solid 1px;
            border-bottom: #ccc solid 1px;
        }

        #tabs ul li {
            float: left;
            border-top: #ccc solid 1px;
            border-right: #ccc solid 1px;
        }

        #tabs ul li a {
            display: block;
            padding: 0 12px;
            line-height: 29px;
            border: white solid 1px;
            border-bottom: none;
            background-color: #e0e0e0;
            color: #271d1e;
            text-decoration: none;
            font-size: 14px;
        }

        /*当一个标题a获得焦点时的样式*/
        #tabs ul li .current {
            border-bottom: white solid 1px;
            background-color: white;
        }

        #box_main {
            /*border: #ccc solid 1px;*/
            border-top: none;
            background-color: #fff;
            width: 100%;
            /*height: 650px;*/
        }

        #box_main h3 {
            line-height: 47px;
            font-size: 22px;
            color: #434142;
            border-bottom: #e2e2e2 dashed 1px;
            margin-bottom: 10px;
        }

        /*让一开始，所有的内容面板隐藏*/
        #box_main > div {

            display: none;

        }

        /*一开始，第一个内容面板显示*/
        #box_main #gallery {
            display: block;
            width: 100%;
            background-color: #ffffff !important;

        }



        #box_main p {
            color: #999999;
            font-size: 12px;
            line-height: 21px;
        }
    </style>
    <script src="js/jquery-2.2.0.min.js"></script>
    <script>
        $(init);
        function init(){
            // 遍历每一个li
            $("#tabs .title").find("li").each(function(index){
                $(this).on("click",function(){
                    $(this).siblings().find("a").removeClass("current");
                    $(this).find("a").addClass("current");
                    $("#box_main>div").eq(index).fadeIn().siblings().stop().hide();
                });
            });
        }
    </script>
</head>

<body onload="tableLoad()">

<div id="box">
    <div id="tabs">
        <ul class="title">
            <li><a href="javascript:void(0)" class="current">基本信息</a></li>
            <!--<li><a href="javascript:void(0)">资质证书</a></li>-->
            <!--<li><a href="javascript:void(0)">人生经历</a></li>-->
            <!--<li><a href="javascript:void(0)">前科记录</a></li>-->
        </ul>
    </div>
    <div id="box_main">

        <div class="contact" style="display: block">
            <table class="tailTable" border="1">
                <tr>
                    <td class="Tailtd_label"><label>姓名</label></td>
                    <td class="TailTableTd" colspan="2"><input type="text"/></td>
                    <td class="tableImg" rowspan="5"><img src="img/user01.jpg" /> </td>

                </tr>
                <tr>
                    <td class="Tailtd_label"><label>身份证号</label></td>
                    <td class="TailTableTd" colspan="2"><input type="text"/></td>

                </tr>
                <tr>
                    <td class="Tailtd_label"><label>工作证号</label></td>
                    <td class="TailTableTd" colspan="2"><input type="text"/></td>

                </tr>
                <tr>
                    <td class="Tailtd_label"><label>性别</label></td>
                    <td class="TailTableTd" colspan="2"><input type="radio" checked="checked" readonly="readonly"/><span class="tdSpan">男</span><input type="radio"  readonly="readonly"/><span class="tdSpan01">女</span></td>

                </tr>
                <tr>
                    <td class="Tailtd_label"><label>年龄</label></td>
                    <td class="TailTableTd" colspan="2"><input type="text"/></td>

                </tr>
                <tr>
                    <td class="Tailtd_label"><label>户口所在地</label></td>
                    <td class="TailTableTd" colspan="3"><input type="text"/></td>

                </tr>
                <tr>
                    <td class="Tailtd_label"><label>职务</label></td>
                    <td class="TailTableTd"><input type="text"/></td>
                    <td class="Tailtd_label"><label>工作单位</label></td>
                    <td class="TailTableTd"><input type="text"/></td>

                </tr>
                <tr>
                    <td class="Tailtd_label"><label>最高学历</label></td>
                    <td class="TailTableTd"><input type="text"/></td>
                    <td class="Tailtd_label"><label>毕业学校</label></td>
                    <td class="TailTableTd"><input type="text"/></td>

                </tr>
                <tr>
                    <td class="Tailtd_label"><label>联系电话</label></td>
                    <td class="TailTableTd"><input type="text"/></td>
                    <td class="Tailtd_label"><label>入职时间</label></td>
                    <td class="TailTableTd"><input type="text"/></td>

                </tr>


            </table>
            <p style="text-align: center;padding-top: 5px;padding-bottom: 5px"><button class="but_save">保存</button><button class="but_save" style="background-color: #ff7f2c">关闭</button></p>
        </div>
        <div class="contact" >
            <div class="lawLeft01">
                <h6>资质列表</h6>
                <ul class="companyListUl">
                    <li><a href="#" class="conpanyListActive">危险化学品从业人员资格证书</a> <span>2015-06-1</span></li>
                    <li><a href="#">特种作业证</a> <span>2015-06-1</span></li>
                    <li><a href="#">危险化学品生产资质</a> <span>2015-06-1</span></li>
                    <li><a href="#">危险化学品生产资质</a> <span>2015-06-1</span></li>
                    <li><a href="#">危险化学品生产资质</a> <span>2015-06-1</span></li>
                    <li><a href="#">危险化学品生产资质</a> <span>2015-06-1</span></li>
                    <li><a href="#">危险化学品生产资质</a> <span>2015-06-1</span></li>
                    <li><a href="#">危险化学品生产资质</a> <span>2015-06-1</span></li>
                    <li><a href="#">危险化学品生产资质</a> <span>2015-06-1</span></li>
                    <li><a href="#">危险化学品生产资质</a> <span>2015-06-1</span></li>
                </ul>
            </div>

            <div class="lawLeft03">
                <h6>资质证书查看</h6>
                <p class="lawLeft03p01">危险化学品生产资质</p>
                <p class="lawLeft03p01"><img src="img/company1.png" class="companyImg"/> </p>

            </div>

        </div>
        <div class="contact">
            <div class="notice_check">
                <p>
                    <label class="">名称：</label>
                    <input type="text" class="find_input" placeholder="">
                    <label class="">类型：</label>
                    <select class="find_input">
                        <option>全部</option>
                        <option>从业</option>
                        <option>教育</option>
                    </select>

                    <button class="check_btn">查询</button>

                </p>
            </div>
            <table id="table1"></table>

        </div>
        <div class="contact">
            <div class="notice_check">
                <p>
                    <label class="">名称：</label>
                    <input type="text" class="find_input" placeholder="">
                    <label class="">时间：</label>
                    <input type="date" class="find_input" placeholder="">

                    <button class="check_btn">查询</button>

                </p>
            </div>
           <table id="table"></table>

        </div>
    </div>
</div>

</body>
<script src="js/jquery/jQuery-2.2.0.min.js"></script>
<script src="js/bstable/js/bootstrap.min.js"></script>
<script src="js/bstable/js/bootstrap-table.js"></script>
<script src="js/bstable/js/bootstrap-table-zh-CN.min.js"></script>
<script src="js/layer_v2.1/layer/layer.js"></script>
<script type="text/javascript" src="js/demo/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/ztree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="js/ztree/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript">
    $(function () {
        $(".companyListUl li a").click(function () {
            $(this).addClass("conpanyListActive").parents().siblings().find("a").removeClass("conpanyListActive");

        })
        $('#table').bootstrapTable({
            method: "get",
            striped: true,
            singleSelect: false,
            url: "json/personlist03.json",
            dataType: "json",
            pagination: false, //分页
            pageSize: 10,
            pageNumber: 1,
            search: false, //显示搜索框
            contentType: "application/x-www-form-urlencoded",
            queryParams:null,
            columns: [

                {
                    title: "编号",
                    field: 'no',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '案件名称',
                    field: 'name',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '类型',
                    field: 'type',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '犯案地点',
                    field: 'addr',
                    align: 'center'
                },
                {
                    title: '犯案时间',
                    field: 'time',
                    align: 'center'
                },
                {
                    title: '处罚结果',
                    field: 'result',
                    align: 'center'
                },

                {
                    title: '处理单位',
                    field: 'unit',
                    align: 'center'
                },
                {
                    title: '备注',
                    field: 'note',
                    align: 'center'
                }
            ]
        });
        $('#table1').bootstrapTable({
            method: "get",
            striped: true,
            singleSelect: false,
            url: "json/personlist01.json",
            dataType: "json",
            pagination: false, //分页
            pageSize: 10,
            pageNumber: 1,
            search: false, //显示搜索框
            contentType: "application/x-www-form-urlencoded",
            queryParams:null,
            columns: [

                {
                    title: "编号",
                    field: 'no',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '经历名称',
                    field: 'name',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '类型',
                    field: 'type',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '开始时间',
                    field: 'time01',
                    align: 'center'
                },
                {
                    title: '结束时间',
                    field: 'time02',
                    align: 'center'
                },
                {
                    title: '所在地点',
                    field: 'addr',
                    align: 'center'
                },
                {
                    title: '内容',
                    field: 'con',
                    align: 'center'
                }


            ]
        });
    });


</script>


</html>
